import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Upload, Icon, Modal, message } from 'antd'
import { reqDeleteImg } from '../../api'
import { BASE_IMG_URL } from '../../utils/constants'

// 用于图片上传的组件
export default class PicturesWall extends Component {
  
  static propTypes = {
    imgs: PropTypes.array
  }

  state = {
    previewVisible: false, // 标识是否显示大图预览Modal
    previewImage: '', // 大图的url
    fileList: [], // 所有已上传图片文件对象的数组
  }

  constructor (props) {
    super(props)
    let fileList = []
    // 传入了imgs属性
    const { imgs } = this.props
    if (imgs && imgs.length>0) {
      fileList = imgs.map((img, index) => ({
        uid: -index, // 每个file都有自己唯一的id
        name: img, // 图片文件名
        status: 'done', // 图片状态: done-已上传, uploading: 正在上传中, removed: 已删除
        url: BASE_IMG_URL + img
      }))
    }
    // 初始化状态
    this.setState({
      previewVisible: false, // 标识是否显示大图预览Modal
      previewImage: '', // 大图的url
      fileList // 所有已上传图片文件对象的数组
    })
  }

  // 获取所有已上传图片文件名的数组
  getImgs = () => {
    return this.state.fileList.map(file => file.name)
  }

  // 隐藏Modal
  handleCancel = () => this.setState({ previewVisible: false })

  // 预览大图图片
  handlePreview = file => {
    // console.log('handlePreview()', file)
    // 显示指定file对应的大图
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    })
  }

  // file: 当前操作的图片文件(上传/删除)
  // fileList: 所有已上传图片文件对象的数组
  handleChange = async ({ file, fileList }) => {
    // console.log('handleChange()', file.status, fileList.length, file===fileList[fileList.length-1])

    if (file.status === 'done') { // 上传图片
      // {status: 0, data: {name: 'xxx.jpg', url: '图片地址'}}
      const result = file.response
      if (result.status === 0) {
        message.success('上传图片成功')
        const { name, url } = result.data
        file = fileList[fileList.length - 1]
        file.name = name
        file.url = url
      } else {
        message.error('上传图片失败')
      }
    } else if (file.status === 'removed') { // 删除图片
      const result = await reqDeleteImg(file.name)
      if (result.status === 0) {
        message.success('删除图片成功！')
      } else {
        message.error('删除图片失败！')
      }
    }
    // 在操作(上传/删除)过程中更新fileList状态
    this.setState({ fileList })
  }

  render() {
    const { previewVisible, previewImage, fileList } = this.state
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div>Upload</div>
      </div>
    );
    return (
      <div className="clearfix">
        <Upload
          action="/manage/img/upload" /*上传图片的接口地址*/
          accept="image/*" /*只接收图片格式*/
          name="image" /*请求参数名*/
          listType="picture-card" /*卡片样式*/
          fileList={fileList} /*所有已上传图片文件对象的数组*/
          onPreview={this.handlePreview}
          onChange={this.handleChange}
        >
          {fileList.length >= 8 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>
    );
  }
}
